<template>
  <div class="hot-box" ref="container">
    <div>
      <!--hot-->
      <div class="hot" ref="fh">
        <div class="hot-head">热门城市</div>
        <ul class="hot-list clearFix">
          <li v-for="itm in hotCities" :key="itm.id" @click="changeCity(itm.name)">{{itm.name}}</li>
        </ul>
      </div>
      <!--list-->
      <div class="list">
        <div class="list-head">字母排序</div>
        <div class="list-list">
          <ul class="clearFix">
            <li v-for="(itm,index) in cities" @click="finds(index)">{{index}}</li>
          </ul>
        </div>
      </div>
      <!--sort-->
      <div class="sort">
        <div v-for="(itm,index) in cities" :key="itm.index" :ref="index">
          <div class="sort-head">{{index}}</div>
          <ul class="sort-list clearFix">
            <li v-for="itme in itm" :key="itme.id"  @click="changeCity(itme.name)">{{itme.name}}</li>
          </ul>
        </div>
      </div>
      <div class="fh" @click="fh">返回顶部</div>
    </div>
  </div>
</template>
<script>
  import BScroll from 'better-scroll'
  import {mapMutations} from 'vuex'
  export default {
    props: ["hotCities", "cities"],
    data(){
      return{
        scroll:""
      }
    },
    mounted(){
      let container = this.$refs.container;
      this.scroll = new BScroll(container);
    },
    methods:{
      finds(key){
        this.scroll.scrollToElement(this.$refs[key][0], 1000);
        // console.log(this.$refs[key])
      },
      fh(){
        this.scroll.scrollToElement(this.$refs.fh, 1000);
      },
      changeCity(value){
        console.log(value);
        this.changeName(value);
        this.$router.push('/')
      },
      ...mapMutations(['changeName'])
    }
  }
</script>
<style scoped>
  /*hot*/
  .hot-head {
    font-size: .12rem;
    line-height: .36rem;
    margin-left: .15rem;
  }

  .hot-list {
    background: #fff;
  }

  .hot-list li {
    width: 33.333%;
    line-height: .45rem;
    text-align: center;
    float: left;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    font-size: .14rem;
    box-sizing: border-box;
  }

  .hot-list li:nth-child(3n) {
    border-right: none;
  }

  /*list*/
  .list-head {
    font-size: .12rem;
    line-height: .36rem;
    margin-left: .15rem;
  }

  .list-list ul {
    background: #fff;
    padding: .15rem 0;
  }

  .list-list ul > li {
    width: 16.666%;
    line-height: .45rem;
    font-size: .14rem;
    text-align: center;
    float: left;
  }

  /*sort*/
  .sort-head {
    font-size: .12rem;
    line-height: .36rem;
    padding-left: .15rem;
    background: #f5f5f5;
  }

  .sort-list {
    background: #fff;
  }

  .sort-list li {
    width: 25%;
    line-height: .45rem;
    text-align: center;
    float: left;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    font-size: .14rem;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sort-list li:nth-child(4n) {
    border-right: none;
  }
  .hot-box{
    position: absolute;
    top:.76rem;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f5f5f5;
  }
  .fh{
    line-height: .44rem;
    text-align: center;
    font-size: .14rem;
  }
</style>
